<template>
    <div>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="picture">
                            <loadingImage :src="addPrefixHost(contentInfo.image)"/>
                        </div>
                        <div class="content">
                            <ul class="text">
                                <li v-for="(item,index) in contentInfo.questions" class="column">
                                    <p>{{item.question}}</p>
                                    <ul class="option">
                                        <li v-for="list in item.answer" class="option"
                                            @click="setOption($event,index,list.isRight);Answer($event,index,list.isRight)">
                                            <loadingImage :src="addPrefixHost(list.image)"/>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({isServer, redirect, store, params}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                creatAnswer: [],
                getAnswer: [],
                contrast: [],
                errorMessage: "",
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            setOption(e, Index, isRight) {
                const questions = document.querySelectorAll(".column");
                for (let j = 0; j < questions[Index].querySelectorAll(".option").length; j++) {
                    questions[Index].querySelectorAll(".option")[j].classList.remove('active');
                }
                e.currentTarget.classList.add('active');
            },
            Answer(e, Index, isRight) {
                if (isRight === "T") {
                    this.getAnswer[Index] = 1;
                } else {
                    this.getAnswer[Index] = 0;
                }
                //判断所有数值是否为1
                let answer = false;
                if (this.getAnswer.join(",") === this.contrast.join(",")) {
                    answer = true;
                }
                this.setAnswer({
                    answer: answer,
                    msg: this.contentInfo && this.contentInfo.answerSentence
                });
            },
            init() {
                this.$nextTick(_ => {
                    if (this.contentInfo.questions) {
                        if (this.getAnswer.length < this.contentInfo.questions.length) {
                            for (let i = 0; i < this.contentInfo.questions.length; i++) {
                                this.getAnswer.push(0);
                                this.contrast.push(1);
                            }
                        }
                    }
                    this.setAnswer({
                        answer: false,
                        msg: this.contentInfo && this.contentInfo.answerSentence
                    });
                })
            },
        },
        mounted() {
            this.init()
        },
        created() {

        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    creatAnswer: [],
                    getAnswer: [],
                    contrast: [],
                    errorMessage: "",
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            },
        },
        computed: {
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle
            }),
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    .style-3 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
                max-width: 800px;
                position: relative;
            }

            .picture {
                margin: 0 20px 0 0;
                display: inline-block;
                vertical-align: middle;
                position: absolute;
                right: 110%;
                top: 50%;
                transform: translate(0, -50%);

                img {
                    max-width: 2.2rem;
                    max-height: 3.5rem;
                }

            }
            .content {
                display: inline-block;
                vertical-align: middle;
                font-size: 22px;

                .text {
                    text-align: left;
                }

                .option {
                    text-align: center;
                    margin-top: 10px;
                    li {
                        border-radius: 5px;
                        cursor: pointer;
                        display: inline-block;
                        vertical-align: middle;
                        margin: 0 40px;

                        img {
                            max-width: 1rem;
                            max-height: 1rem;
                        }
                        &.active {
                            background: chocolate;
                        }

                    }
                }
            }

        }
    }

</style>
